import React, { Component } from 'react';
import {
  StyleSheet, Text, View, Image, TouchableOpacity, Animated, Alert
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import moment from 'moment';

const arrowIcon = require('../../../../imgs/global/down.png');
const correct = require('../../../../imgs/global/correct.png');

const scale = GLOBAL.SCALE;

export class CartoonComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemData: {},
      imgObj: new Animated.Value(0),
    }
    this.onOff = true;
  }
  componentDidMount = () => { }


  //点击动画
  _startAnimated = () => {
    let { isHeight, startHeight, heightObj, imgObj } = this.state;
    if (isHeight) {
      Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
      Animated.timing(heightObj, { toValue: startHeight, duration: 300, }).start(() => { this.setState({ isHeight: !isHeight }) });
    } else {
      Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
      Animated.timing(heightObj, { toValue: 0, duration: 300 }).start(() => { this.setState({ isHeight: !isHeight }) })
    }
  }

  _onLayout = (event) => {
    let startHeight = 0;
    startHeight = event.nativeEvent.layout.height;
    if (this.onOff) {
      this.setState({
        startHeight,
        heightObj: new Animated.Value(0),
        isHeight: true,
      })
      this.onOff = false
    }
  }

  render () {
    let { heightObj, imgObj, } = this.state;
    let { onBtnRaido, onCheckFrozen, data, teamName } = this.props;
    let item = data.item;
    const { corpId, teamId, isCheck } = data.item
    const spin = imgObj.interpolate({
      inputRange: [0, 1],//输入值
      outputRange: ['-90deg', '0deg'] //输出值
    })
    return (
      <View style={{
        marginTop: 8 * scale, paddingLeft: 12 * scale,
        paddingRight: 12 * scale,
      }}>
        <TouchableOpacity activeOpacity={.6} style={styles.itemWrap} >
          <TouchableOpacity onPress={this._startAnimated} >
            <View style={styles.flexSelect} >
              <TouchableOpacity style={styles.flexRow}
                onPress={() => { onCheckFrozen && onCheckFrozen(data.index, isCheck) }
                }
              >
                <View style={styles.lockView}>
                  {!teamId && corpId !== '1' ? (
                    <Image style={styles.lockImage} source={correct} />
                  ) : null}
                  {isCheck ? (
                    <Image style={styles.lockImage} source={correct} />
                  ) : null}
                </View>
                <View style={{ alignItems: 'flex-start' }}>
                  <Text style={styles.itemLightText}>{item.goodsCateName || '--'}</Text>
                </View>
              </TouchableOpacity>
              <View
                style={styles.flexIcon}>
                <Animated.Image style={[styles.arrowIcon, { transform: [{ rotate: spin }] }]} source={arrowIcon}></Animated.Image>
              </View>
            </View>
          </TouchableOpacity>

          <View style={styles.planName}>
            <View>
              <Text style={styles.planText}>计划量 (吨)</Text>
              <Text style={styles.planVaule} >{(item.planQuantity || 0).toFixed(3)} </Text>
            </View>
            <View style={{ marginLeft: 10 * scale }}>
              <Text style={styles.planText} >价格 （元/吨）</Text>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingRight: 10 * scale }}>
                <Text style={[styles.planVaule,]}>{(item.price || 0).toFixed(2)}</Text>
                {item.priceTypeName == '暂定价' ? (
                  <View style={{ backgroundColor: 'rgba(250, 100, 0, .1)', }}>
                    <Text style={[styles.flexPrices]}>{item.priceTypeName}</Text>
                  </View>
                ) :
                  <View style={{ backgroundColor: 'rgba(0, 145, 255, .1)', }}>
                    <Text style={[item.priceTypeName ? styles.flexProvisional : '']}>{item.priceTypeName || ''}</Text>
                  </View>

                }
              </View>
            </View>
            <View>
              <Text style={styles.planText} >提交人 (部门)</Text>
              <Text style={[styles.planVaule, styles.flexGroup]}>{item.createStaffName || '--'} {teamName || ''} {`(${item.organName})` || '--'}</Text>
            </View>
          </View>
          <Animated.View style={{ height: heightObj, overflow: 'hidden', backgroundColor: style.color.bgGray }}>
            <View onLayout={(event) => this._onLayout(event)} style={[styles.bodys]}>
              <View style={styles.planName}>
                <View>
                  <Text style={styles.planText}>运费 (元/吨)</Text>
                  <Text style={styles.planVaule} >{(item.logisticsPrice || 0).toFixed(2)}</Text>
                </View>
                <View style={{ marginLeft: 10 * scale }}>
                  <Text style={styles.planText} >资金成本 (元/吨)</Text>
                  <Text style={styles.planVaule}>{(item.capitalCost || 0).toFixed(2)}</Text>
                </View>
                <View>
                  <Text style={styles.planText} >落袋价 (元/吨)</Text>
                  <Text style={styles.planVaule}>{(item.realPrice || 0).toFixed(2)}</Text>
                </View>
              </View>
              <View style={styles.planName}>
                <View>
                  <Text style={styles.planText}>交货期限</Text>
                  <Text style={styles.planVaule} >{item.deliveryDate || '--'}</Text>
                </View>
                <View style={{ marginLeft: 10 * scale }}>
                  <Text style={styles.planText} >交货区域</Text>
                  <Text style={styles.planVaule}>{item.deliveryPlaceName || '--'}</Text>
                </View>
                <View>
                  <Text style={styles.planText} >交货方式</Text>
                  <Text style={styles.planVaule}>{item.deliveryWayName || '--'}</Text>
                </View>
              </View>
              <View style={styles.planName}>
                <View>
                  <Text style={styles.planText}>创建时间</Text>
                  <Text style={[styles.planVaule, styles.flexGroup]} >{item.createTime || '--'}</Text>
                </View>
                <View style={{ marginLeft: 10 * scale }}>
                  <Text style={styles.planText} >计划类型</Text>
                  <Text style={styles.planVaule}>{item.planTypeName || '--'}</Text>
                </View>
                <View>
                  <Text style={styles.planText} ></Text>
                  <Text style={styles.planVaule}></Text>
                </View>
              </View>
              <View style={{ flexDirection: 'row', justifyContent: 'flex-end', paddingRight: 10 * scale, alignItems: 'center' }}>
                <View>
                  <Text style={[styles.flexColor]} onPress={() => Alert.alert(`${item.remark || '暂无备注'}`)}>[备注]</Text>
                </View>
                <TouchableOpacity style={styles.planText, { paddingRight: 10 * scale, marginLeft: 15 * scale }} onPress={() => { onBtnRaido && onBtnRaido(item) }}>
                  <View >
                    <Text style={styles.flexColor}>[审批流]</Text></View>
                </TouchableOpacity>
              </View>
            </View>
          </Animated.View>

          <View style={styles.itemBorder}></View>
          {item.formulaName && item.discountOrPremium ? (
            <View style={styles.flexPrice}>
              <Text style={styles.flexTime}>{item.formulaName ? item.formulaName + '|升帖水：' : '--'}{item.discountOrPremium || 0}</Text>
            </View>
          ) : null
          }
          {item.longOrderId && item.planQuantity && item.leftQuantity ? (
            <View style={styles.flexPrice}>
              <Text style={styles.flexPriceCount}>
                长约框架：{item.longOrderId || '--'} | 采购量：{item.planQuantity || '0'}吨，剩余可执行量
         ：{item.leftQuantity || '0'}吨，框架截止日：{item.exeEndDate ? moment(item.exeEndDate).format('YYYY-MM-DD') : '--'}
              </Text>
            </View>
          ) : null
          }
          {item.companyName ? (
            <View style={styles.flexPrice}>
              <Text style={styles.flexPriceCount}>企业：{item.companyName || '--'}</Text>
            </View>
          ) : null
          }
        </TouchableOpacity>
      </View>
    )

  }
}

const styles = StyleSheet.create({
  itemWrap: {
    backgroundColor: style.color.bgGray,
    width: '100%',
    borderRadius: 8 * scale,
    // paddingLeft: 12 * scale,
    // paddingRight: 12 * scale,
    paddingBottom: 18 * scale,
    paddingTop: 14 * scale,
  },
  flexSelect: {
    flexDirection: 'row',
    marginBottom: 15 * scale,
    marginTop: 5 * scale,
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale,
    alignItems: 'center',
  },
  flexRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  lockView: {
    flexDirection: 'row',
    // justifyContent: 'center',
    alignItems: 'center',
    height: 12 * scale,
    width: 12 * scale,
    borderWidth: 1 * scale,
    borderColor: '#0E7FFD',
    // marginLeft: 14 * scale,
    marginRight: 5 * scale,
  },
  itemLightText: {
    fontSize: 14 * scale,
    color: '#0091FF',
    fontWeight: '500',
  },
  flexIcon: {
    marginBottom: 1 * scale,
    paddingTop: 2 * scale,
    position: 'absolute',
    top: 0,
    right: 0 * scale,
  },
  arrowIcon: {
    width: 8 * scale,
    height: 8 * scale,
    tintColor: '#D8D8D8',
    position: 'absolute',
    right: 0,
    top: 2 * scale,
    right: 32 * scale,
  },
  planName: {
    flexDirection: 'row',
    // alignItems: 'center',
    justifyContent: "space-between",
    position: 'relative',
    marginBottom: 15 * scale,
    paddingLeft: 10 * scale,
    paddingRight: 10 * scale,
  },
  planText: {
    color: '#000000',
    fontSize: 12 * scale,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    fontWeight: '300',
    color: '#030303',
    opacity: 0.5,
    width: 115 * scale,
  },
  planVaule: {
    color: '#000000',
    fontSize: 12 * scale,
    fontWeight: '500',
    color: '#030303',
    paddingTop: 3 * scale,
  },
  itemBorder: {
    flexDirection: 'row',
    position: 'relative',
    height: 1 * scale,
    marginTop: 10 * scale,
    marginLeft: 10 * scale,
    marginRight: 10 * scale,
    backgroundColor: '#E3E7F0',
    marginBottom: 12 * scale,
  },
  flexPrices: {
    paddingRight: 3 * scale,
    paddingLeft: 3 * scale,
    paddingTop: 3 * scale,
    paddingBottom: 3 * scale,
    fontSize: 12 * scale,
    fontWeight: '500',
    color: '#FA6400',
    borderRadius: 5 * scale,
  },
  flexProvisional: {
    paddingRight: 3 * scale,
    paddingLeft: 3 * scale,
    paddingTop: 3 * scale,
    paddingBottom: 3 * scale,
    fontSize: 12 * scale,
    fontWeight: '500',
    color: '#0091FF',
    borderRadius: 5 * scale,
  },
  flexGroup: {
    width: 90 * scale,
  },
  flexColor: {
    color: '#0E7FFD',
    fontWeight: '500',
    paddingTop: 3 * scale,
    fontSize: 14 * scale,
  },
  flexPrice: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    // alignItems: 'center',
    paddingRight: 10 * scale,
    paddingLeft: 10 * scale,
    marginBottom: 8 * scale,
  },
  flexTime: {
    color: '#000000',
    fontSize: 12 * scale,
    opacity: 0.95
  },
  flexPriceCount: {
    color: '#000000',
    fontSize: 12 * scale,
    opacity: 0.95
  },

})
